<template>
  <div v-title="'单页面 - 世外运营云平台'">
    <mk-breadcrumb :breadcrumb-data="breadcrumbData"></mk-breadcrumb>
    <el-scrollbar :wrapStyle="[{maxHeight:(bodyHeight-fixedHeightSmall)+'px'}]">
      <div class="PublicListStyle MkSinglePage">
        <mk-search-component :formArr="formArr" inputPlaceholder="页面名称" @startSearch="fun_call_search">
          <span slot="slot_1">
            <!--<mk-permission :perms="['swxc:property:publish:article:create']">-->
              <el-button type="primary" @click="handleAdd" class='floatRight btn-create'>添加页面</el-button>
            <!--</mk-permission>-->
          </span>
          <div slot="slot_2" class="search-result-amount textAlignRight">
            <el-button type="primary" size="" @click="handleAdd" class='floatRight btn-create'>添加页面</el-button>
          </div>
        </mk-search-component>
        <div class="primary_bg trHasCursor tabContainer allPageList" v-loading="loadingTab"
             element-loading-text="拼命加载中">
          <el-table
            :data="pageListData.elements"
            :default-sort="{prop: 'date', order: 'descending'}"
            style="width: 100%"
            @row-click='showPageDetail'>
            <el-table-column
              prop="name"
              label="页面名称"
              show-overflow-tooltip
              width="">
            </el-table-column>
            <el-table-column
              prop="founder"
              width=''
              show-overflow-tooltip
              label="创建人">
            </el-table-column>
            <el-table-column
              width=''
              prop="createTime"
              sortable
              :formatter="formatDate"
              label="创建时间">
            </el-table-column>
            <el-table-column
              width='300'>
              <template slot-scope='scope'>
                <el-button type="text" @click.stop v-clipboard = 'copyLink(scope.row.url)' @success="copySuccess" @error="copyError">复制链接</el-button>
                <el-button type="text" v-if="scope.row.up===true"
                           @click.stop="handleOperation(scope.row.id,'DOWN',scope.row.up)">下架
                </el-button>
                <el-button type="text" v-if="scope.row.up===false"
                           @click.stop="handleOperation(scope.row.id,'UP',scope.row.up)">上架
                </el-button>
                <el-button type="text" @click.stop="handleDelete(scope.row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination v-if='pageListData.elements.length>0'
                         @current-change="loadData"
                         :current-page="pageListData.page"
                         :page-size="pageListData.size"
                         layout="total, prev, pager, next"
                         :total="pageListData.totalAmount">
          </el-pagination>
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>

<script>
  import MkBreadcrumb from '../../../components/MkBreadcrumb.vue'
  import singlePageService from '../../../services/singlePage'
  import * as constants from '../../../utils/constants'
  import {mapState} from 'vuex'
  export default {
    name: 'MkSinglePage',
    computed: mapState({
      bodyHeight: state => state.global.bodyHeight,
      fixedHeightSmall: state => state.global.fixedHeightSmall,
    }),
    components: {
      MkBreadcrumb
    },
    computed: {},
    mounted: function () {
    },
    activated(){
      this.loadData(1);
    },
    methods: {
      fun_call_search(search, input) {
        this.searchCondition.keyWord = input;
        this.loadData(1);
      },
      loadData(page) {
        if(page) {
          this.searchCondition['page.pn'] = page;
        }
        this.loadingTab = true;
        singlePageService.loadPageList(this.searchCondition, (data) => {
          this.pageListData = data.data;
          this.loadingTab = false;
        })
      },
      formatDate(row, column, cellValue){
        return new Date(cellValue).pattern("yyyy-MM-dd HH:mm")
      },
      handleAdd () {
        this.$router.push({name: 'MkAddSinglePage'});
      },
      copyLink(url){
        return url;
      },
      copySuccess(e) {
        this.$message.success('复制成功');
      },
      copyError(e) {
        this.$message.warning('复制失败');
      },
      handleOperation(id, operation, upState) {
        upState = !upState;
        singlePageService.operatePage({id, id, type: operation}, data => {
          let str = '';
          switch (operation) {
            case 'UP':
              str = '上架';
              break;
            case 'DOWN':
              str = '下架';
              break;
          }

          this.$message.success(str + '成功');
          this.loadData();
        })
      },
      handleDelete(value) {
        this.$confirm('删除将不能恢复，确定要删除吗?', '删除', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          customClass: 'confirmBox_warning'
        }).then(() => {
          singlePageService.operatePage({id: value, type: 'DELETE'}, (data) => {
            this.$message.success('删除成功');
            if (this.pageListData.page != 1 && (this.pageListData.totalAmount == (this.pageListData.page - 1) * (this.pageListData.size) + 1)) {
              this.searchCondition['page.pn'] = this.searchCondition['page.pn'] - 1;
            }
            this.loadData();
          });
        }).catch(() => {
        });
      },
      showPageDetail(row, event, column){
        this.$router.push({name: 'MkAddSinglePage', params: {id: row.id, status: row.status, url: row.url}});
//        this.dialogVisible=true;
      },
      closeDialog(type){
        this.dialogVisible = false;
        if (type) {
          this.loadData();
        }
      },
    },
    data () {
      return {
        formArr: [],
        loadingTab: false,
        searchCondition: {
          'page.no': 1,
          'page.size': 10,
          keyWord: '',
        },
        pageListData: {
          elements: [],
          totalPages: '',
          totalAmount: '',
          page: '',
          size: '',
        },

        breadcrumbData: {
          list: [
            {name: '运营', path: null, clickAble: false},
            {name: '单页面', path: null, clickAble: false},
          ],
          returnData: {
            isReturn: false, path: null
          },
          iconName: 'operation-icon',
        },
        id: '',
        dialogVisible: false,
      }
    }
  }
</script>

<style lang="less">
  .MkSinglePage {
    .allPageList {
      .el-button {
        padding: 0;
        padding-right: 5px;
      }
    }
  }
</style>
